<template>
	<view class="random_join_record_box">
		<Tips/>
		<view class="header_join">
			<view class="top">
				<MyNull height="calc(20vh)" :img="selfJoinRecord ? 'joinedRandomLots.png' : 'joinRandomLots.png'"/>
				<view class="right" v-if="randomLotsInfo">
					<view class="tip text_ellipsis">
						{{joinerRecord.joinNums}}/{{joinerRecord.allNums}}人已参与
					</view>
					<view class="tip text_ellipsis">
						{{randomLotsInfo?.title}}
					</view>
					<view class="self_join" v-if="user_store?.userInfo?.id">
						<Avatar :fileName="user_store.userInfo.user_avatar" size="60rpx" />
						<view class="text_ellipsis" style="padding-left: 10rpx;">
							{{selfJoinRecord ? `您抽到${selfJoinRecord}` : '您还未参与抽签'}}
						</view>
					</view>
				</view>
			</view>
			<view class="footer">
				<MyButton borderRadius="20rpx" :clickFun="joinRandomLotsFun" :bgc="primary_text_color">
					{{selfJoinRecord ? '已参与' : '参与抽签'}}
				</MyButton>
			</view>
		</view>
		<view class="content_join" v-if="randomLotsInfo">
			<AdBanner width="100%" diyStyle="margin:-20rpx 0rpx 10rpx 0rpx"/>
			<view class="item_lot_staus" v-for="(item,index) in randomLotsInfo.data" :key="index">
				<view class="title text_ellipsis">
					第{{index+1}}种签：{{item.name}}
				</view>
				<view class="join_box">
					<view class="joiner" v-for="(item2,index) in item.lotStatus" :key="index">
						<view class="item">
							<view class="avatar_box">
								<uni-badge 
									:customStyle="{background: primary_light_color}" 
									:text="item2.user_id === user_store.userInfo?.id ? '自己' : ''" 
									absolute="rightTop" 
									:offset="[-8, 2]" 
									size="small">
									<Avatar :fileName="item2.user_avatar" size="60rpx" />
								</uni-badge>
							</view>
							<view class="nick_name text_ellipsis">
								{{item2.nick_name_by_dormitory}}
							</view>
						</view>
					</view>		
				</view>
				<view v-if="index !== randomLotsInfo.data.length-1" class="line"></view>
			</view>
			<view class="footer_share">
				<button class="invite_joiner" open-type="share">分享给室友</button>
				<button class="copy" @click="()=>copyRandomLot()">复制该抽签</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onShow,
		onLoad,
		onHide,
		onShareAppMessage
	} from '@dcloudio/uni-app'
	import {
		nextTick, 
		ref,
		onUnmounted
	} from 'vue'
	
	import Tips from '@/components/Tips/Tips.vue'
	import MyNull from '@/components/MyNull/MyNull.vue'
	import TipInfo from '@/components/TipInfo/TipInfo.vue'
	import MyInput from '@/components/MyInput/MyInput.vue'
	import MyButton from '@/components/MyButton/MyButton.vue'
	import Avatar from '@/components/Avatar/Avatar.vue'
	import AdBanner from '@/components/AdBanner/AdBanner.vue'
	
	import {
		joinSystemPath,
		joinAvatarPath
	} from '@/utils/imgJoinName.js'
	import {
		verifyIsLogin,
		verifyIsShowChooseAd
	} from '@/hooks/verify.js'
	
	import {dynamicStyleStore} from '@/stores/dynamicStyle.js'
	import {
		userStore
	} from '@/stores/user'
	
	import {
		openMessageActivityOver
	} from '@/utils/messageAuth.js'
	
	import {
		DormitoryModel
	} from '@/service/model/dormitory.js'
	
	import {
		RandomLotsState
	} from '@/enum/GlobalEnum.js'
	
import MyItemVue from '../../../components/MyItem/MyItem.vue'
	
	const dynamicStyle_store = dynamicStyleStore()
	const user_store = userStore()
	const dormitoryModel = new DormitoryModel()
	
	const {
		primary_hot_color,
		primary_light_color,
		primary_main_bgc,
		primary_shallow_color,
		shallow_text_color,
		primary_text_color,
		primary_line_color
	} = dynamicStyle_store.dormitoryStyle
	
	const dormitoryAllId=uni.getStorageSync('homeData')
	
	const randomLotsId = ref('')
	const timer = ref({})
	const randomLotsInfo = ref(null)
	const allDormitoryJoiner = ref([])
	const selfJoinRecord = ref('')
	const joinerRecord = ref({
		joinNums:0,
		allNums:0
	})
	
	const getRandomLotsInfo=async()=>{
		verifyIsLogin()
		if(!randomLotsInfo.value){
			uni.showLoading({
				title:'加载中'
			})
		}
		const {data,success} = await dormitoryModel.getRandomLotsInfo(null,randomLotsId.value)
		if(success){
			const JoinAllRecordObj = {joinNums:0,allNums:0}
			if(data.state !== RandomLotsState.GOING){
				clearInterval(timer.value.lots)
			}
			data.data.map((item,index)=>{
				JoinAllRecordObj.allNums+=item.nums
				JoinAllRecordObj.joinNums+=item.lotStatus.length
				//处理自己抽中的签
				if(!selfJoinRecord.value){
					const arr = item.lotStatus.filter(item2=>item2.user_id === user_store.userInfo.id)
					if(arr.length){
						selfJoinRecord.value = item.name
					}
				}
				//处理未被抽中的签
				if(item.lotStatus.length < item.nums){
					const len = item.nums - item.lotStatus.length
					for(let i=0;i<len;i++){
						const obj = {
							user_id:index+i,
							nick_name_by_dormitory:"待抽签",
							user_avatar:"kongUser2.png"
						}
						item.lotStatus.push(obj)
					}
				}
			})
			joinerRecord.value = JoinAllRecordObj
			randomLotsInfo.value = data
			uni.hideLoading()
		}
	}
	
	const copyRandomLot=()=>{
		if(randomLotsInfo.value.id){
			uni.redirectTo({
				url:"/pages/Dormitory/CreateRandomLots/CreateRandomLots?id="+randomLotsInfo.value.id
			})
		}
	}
	
	const joinRandomLotsFun=()=>{
		openMessageActivityOver(postJoinRandomLotsFun)
	}
	
	const postJoinRandomLotsFun=async()=>{
		verifyIsLogin()
		verifyIsShowChooseAd(getCurrentPages(),'参与抽签')
		if(selfJoinRecord.value){
			uni.$emit('tips','已经参与过了','warn')
			return
		}
		const {data,success} = await dormitoryModel.postJoinRandomLots({},randomLotsId.value)
		if(success){
			uni.$emit('tips',data,'success')
		}
	}
	
	onLoad((opt)=>{
		const {isNew,id} = opt
		randomLotsId.value = id
		if(isNew){
			nextTick(()=>{
				uni.$emit('tips','记得分享给室友哦','info',2000)
			})
		}
		nextTick(()=>{
			uni.$emit('autoShowPushScreenAd')
		})
	})
	onShareAppMessage((res)=>{
		return {
			  title: '来抽个签：'+randomLotsInfo.value.title,
			  path: `/pages/Dormitory/RandomJoinRecord/RandomJoinRecord?id=${randomLotsInfo.value.id}`,
			  mpPath:`/pages/Dormitory/RandomJoinRecord/RandomJoinRecord?id=${randomLotsInfo.value.id}`
			}
	})
	onUnmounted(()=>{
		clearInterval(timer.value.lots)
	})
	
	onHide(()=>{
		clearInterval(timer.value.lots)
	})

	onShow(()=>{
		getRandomLotsInfo()
		timer.value.lots = setInterval(()=>{
			getRandomLotsInfo()
		},1000)
	})
</script>

<style lang="less">
	.text_ellipsis{
		white-space:nowrap;
		text-overflow:ellipsis;
		overflow: hidden;
	}
	.random_join_record_box{
		height: calc(100vh);
		background-image: linear-gradient(to top, rgba(97,214,213,0),rgba(97,214,213,1));
		position: relative;
		.header_join{
			height: calc(28vh);
			padding: 20rpx;
			padding-top: 0;
			margin-top: -20rpx;
			display: grid;
			grid-template-rows: 2fr 1fr;
			padding-bottom: 0;
			.top{
				display: grid;
				grid-template-columns: 3fr 2fr;
				.right{
					display: flex;
					flex-direction: column;
					justify-content: center;
					width: calc(40vw);
					color: #FFFFFF;
					.tip{
						width: 100%;
					}
					.tip:nth-child(2){
						margin: 10rpx 0;
						color: v-bind(primary_text_color);
					}
					.self_join{
						width: 100%;
						display: flex;
						align-items: center;
						font-size: 26rpx;
						color: v-bind(primary_text_color);
					}
				}
			}
			.footer{
				width: 100%;
				display: grid;
				grid-template-columns: 1fr;
			}
		}
		.content_join{
			min-height: calc(72vh);
			background-color: #FFFFFF;
			margin: 5rpx 20rpx 0 20rpx;
			border-radius: 20rpx 20rpx 0 0;
			padding: 20rpx;
			padding-bottom: 200rpx;
			color: v-bind(primary_text_color);
			position: relative;
			.item_lot_staus{
				.title{
					margin-bottom: 10rpx;
				}
				.join_box{
					display: grid;
					grid-template-columns: repeat(5,1fr);
					row-gap: 20rpx;
					.joiner{
						.item{
							display: flex;
							flex-direction: column;
							align-items: center;
							.avatar_box{
								background-color: v-bind(primary_light_color);
								width: 60rpx;
								height: 60rpx;
								border-radius: 30rpx;
							}
							.nick_name{
								font-size: 26rpx;
								margin-top: 4rpx;
								width: calc(15vw);
								text-align: center;
							}
						}
					}
				}
				.line{
					width: 100%;
					height: 1rpx;
					background-color: v-bind(primary_line_color);
					margin: 20rpx 0;
				}
			}
			.footer_share{
				position: fixed;
				width: 100%;
				left: 50%;
				transform: translate(-50%,0);
				display: grid;
				grid-template-columns: 1fr 1fr;
				bottom: 0rpx;
				background-color: #FFFFFF;
				padding-bottom: 50rpx;
				.invite_joiner{
					background-color: v-bind(primary_light_color);
					border: 0px solid v-bind(primary_light_color);
					color: #FFFFFF;
					margin: 0 20rpx;
				}
				.copy{
					background-color: v-bind(primary_text_color);
					border: 0px solid v-bind(primary_text_color);
					color: #FFFFFF;
					margin: 0 20rpx;
				}
			}
		}
	}
</style>
